<template>
  <!-- 自定义标签页面 -->
  <view class="main">
    <!-- 头部 -->
    <view class="top_tou">
      <view class="left_" @tap="fanLastPage">
        <image
          src="../../images/aliang/navigation.png"
          mode="aspectFill"
        ></image>
      </view>
      <view class="center_"> 标签管理 </view>
      <view class="right_"> </view>
    </view>
    <!-- 列表部分 -->
    <view class="list_">
      <view class="item_" v-for="(item, index) in list" :key="index">
        <view class="name_">
          {{ item.label }}
        </view>
        <view class="imgs_" @tap="handleShan(item.id)">
          <img src="../../images/aliang/labelShan.png" />
        </view>
      </view>
      <view class="item_ item_input" v-if="isAdd">
        <input
          type="text"
          v-model="newLabel"
          placeholder="请输入要添加的标签"
          maxlength="11"
          focus
        />
      </view>
      <view class="item" @tap="handleAddLabel" v-if="!isAdd">
        <image
          src="../../images/aliang/labelJoin.png"
          mode="aspectFill"
        ></image>
        <text>点击添加新标签</text>
      </view>
    </view>

    <view class="footer_btn" @tap="handleLabel"> 完成 </view>
  </view>
</template>

<script>
import request from "../../utils/request.js";
export default {
  data() {
    return {
      id: "",
      newLabel: "",
      isAdd: false,
      list: [],
    };
  },
  onLoad(options) {
    this.id = options.id;
  },
  onShow() {
    this.newLabel = "";
    this.list = [];
    this.handleList();
  },
  methods: {
    handleShan(id) {
      uni.showModal({
        title: "提示",
        content: "您确定要删除这个标签吗？",
        cancelColor: "#007aff",
        cancelText: "再想想",
        confirmColor: "#000",
        success: (re) => {
          if (re.confirm) {
            let token = uni.getStorageSync("token");
            if (!token) {
            } else {
              request({
                url: "h5/orgCircle/removeFriendsLabel",
                method: "POST",
                header: {
                  "Content-Type": "application/json",
                  "api-client": "72e0fee8172411ea995200163e05ff66",
                  "api-version": this.globalData.apiVersion,
                  "Source-Type": 7,
                  token: token,
                },
                data: {
                  id: id,
                },
              }).then((res) => {
                if (res.data.code == 200) {
                  this.handleList();
                  uni.showToast({
                    title: "删除成功！",
                    duration: 2000,
                    icon: "none",
                  });
                } else {
                  uni.showToast({
                    title: res.data.msg,
                    duration: 2000,
                    icon: "none",
                  });
                }
              });
            }
          }
        },
      });
    },
    fanLastPage() {
      window.history.go(-1);
    },
    handleLabel() {
      //添加标签
      if (this.newLabel.trim() == "" && !this.isAdd) {
        uni.showToast({
          title: "请点击添加标签输入",
          duration: 1500,
          icon: "none",
        });
        return false;
      }
      if (this.newLabel.trim() == "" && this.isAdd) {
        uni.showToast({
          title: "请输入要添加的标签",
          duration: 1500,
          icon: "none",
        });
        return false;
      }

      var testLabel = /^[0-9a-zA-Z\u4E00-\u9FA5\(\)]*$/;
      if (!testLabel.test(this.newLabel.trim())) {
        uni.showToast({
          title: "请输入合法的标签",
          duration: 1500,
          icon: "none",
        });
        return false;
      }
      let token = uni.getStorageSync("token");
      if (!token) {
      } else {
        request({
          url: "h5/orgCircle/addFriendsLabel",
          method: "POST",
          header: {
            "Content-Type": "application/json",
            "api-client": "72e0fee8172411ea995200163e05ff66",
            "api-version": this.globalData.apiVersion,
            "Source-Type": 7,
            token: token,
          },
          data: {
            friendsId: this.id,
            label: this.newLabel,
          },
        }).then((res) => {
          if (res.data.code == 200) {
            this.newLabel = "";
            this.handleList();
            uni.showToast({
              title: "添加成功",
              duration: 2000,
              icon: "none",
            });
            this.isAdd = false;
          } else {
            uni.showToast({
              title: res.data.msg,
              duration: 2000,
              icon: "none",
            });
          }
        });
      }
    },
    handleList() {
      let token = uni.getStorageSync("token");
      if (!token) {
        uni.showToast({
          title: "请授权登录再操作！",
          duration: 2000,
          icon: "none",
        });
        setTimeout(() => {
          uni.navigateTo({
            url: "/pages/index/index",
          });
        }, 2000);
      } else {
        request({
          url: "h5/orgCircle/getFriendsLabelList",
          method: "POST",
          header: {
            "Content-Type": "application/json",
            "api-client": "72e0fee8172411ea995200163e05ff66",
            "api-version": this.globalData.apiVersion,
            "Source-Type": 7,
            token: token,
          },
          data: {
            orgId: this.id,
          },
        }).then((res) => {
          // console.log(res, '标签列表')
          if (res.data.code == 200) {
            this.list = res.data.data.filter((v) => {
              return v.labelType == 0;
            });
          } else {
            uni.showToast({
              title: res.data.msg,
              duration: 2000,
              icon: "none",
            });
          }
        });
      }
    },
    handleAddLabel() {
      this.newLabel = "";
      this.isAdd = true;
    },
  },
};
</script>

<style lang="less" scoped>
.main {
  padding-top: 92rpx;

  .footer_btn {
    margin: 0 auto;
    margin-top: 300rpx;
    width: 700rpx;
    height: 80rpx;
    background: #0f6ede;
    border-radius: 8rpx;
    line-height: 80rpx;
    text-align: center;
    font-size: 30rpx;
    font-family: PingFangSC, PingFangSC-Regular;
    font-weight: 400;
    text-align: center;
    color: #ffffff;
  }

  .top_tou {
    box-sizing: border-box;
    display: flex;
    padding: 0 38rpx;
    width: 750rpx;
    height: 92rpx;
    background: #f8f8f8;
    line-height: 92rpx;
    justify-content: space-between;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;

    .left_ {
      height: 28rpx;
      width: 18rpx;

      image {
        width: 100%;
        height: 100%;
      }
    }

    .center_ {
      font-size: 36rpx;
      font-family: PingFangSC, PingFangSC-Medium;
      font-weight: 500;
      text-align: center;
      color: #111111;
    }

    .right_ {
      font-size: 28rpx;
      font-family: PingFangSC, PingFangSC-Regular;
      font-weight: 400;
      text-align: right;
      color: #0f6ede;
    }
  }

  .list_ {
    padding: 0 36rpx;

    .item {
      background: #ffffff;
      box-shadow: 0px -1rpx 0rpx 0rpx #eeeeee inset;
      height: 110rpx;
      // line-height: 110rpx;
      display: flex;
      align-items: center;
      justify-content: center;

      text {
        margin-left: 5rpx;
        font-size: 32rpx;
        font-family: PingFangSC, PingFangSC-Regular;
        font-weight: 400;
        // text-align: left;
        color: #0f6ede;
      }

      image {
        // margin-top: 1.5rpx;
        margin-right: 5rpx;
        width: 24rpx;
        height: 24rpx;
        vertical-align: center;
      }
    }

    .item_ {
      height: 110rpx;
      line-height: 110rpx;
      display: flex;
      justify-content: space-between;
      background: #ffffff;
      box-shadow: 0px -1rpx 0px 0px #eeeeee inset;

      .name_ {
        font-size: 34rpx;
        font-family: PingFangSC, PingFangSC-Regular;
        font-weight: 400;
        // text-align: left;
        color: #111111;
      }

      .imgs_ {
        height: 110rpx;
        display: flex;
        align-items: center;

        img {
          width: 28rpx;
          height: 28rpx;
          background: rgba(15, 110, 222, 0.1);
          border-radius: 50%;
        }
      }
    }

    .item_input {
      input {
        height: 100%;
        font-size: 34rpx;
        font-family: PingFangSC, PingFangSC-Regular;
        font-weight: 400;
        // text-align: left;
        color: #111111;
      }
    }
  }
}
</style>
